<template>
  <div class="app-container defect-question">
    <info-page-container>
      <template slot="body">
        <div class="inspect-info-txt-container">
          <inspect-info :inspect-info="inspectInfo"></inspect-info>
        </div>
        <div class="tabs-container">
          <el-tabs v-model="currentTabValue">
            <el-tab-pane v-for="item in tabsData" :key="item.value" :label="item.label"
                         :name="item.value"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="data-container">
          <component v-if="inspectInfo != null" :currentPageName="currentTabValue" :handelCode="handelCode"
                     @goInfoPage="goInfoPage" :inspectInfo="inspectInfo" :instanceNo="instanceNo"
                     :nodeSerialNo="nodeSerialNo" :is="currentTabValue"></component>
        </div>
      </template>
    </info-page-container>
  </div>
</template>

<script>
import InspectInfo from "@/views/securityCheck/defectQuestion/components/inspectInfo.vue";
import {inspectMixins} from "@/views/securityCheck/mixins/inspectMixins";
import HiddenDangerListPage from "@/views/securityCheck/defectQuestion/listPage/subPage/hiddenDangerListPage.vue";
import {PAGE_LIST, PAGE_NAME} from "@/views/securityCheck/defectQuestion/listPage/config";

export default {
  mixins: [inspectMixins],
  name: "defectQuestion_list",
  components: {
    InspectInfo,
    HiddenDangerListPage
  },
  data() {
    return {
      tabsData: PAGE_LIST,
      currentTabValue: PAGE_NAME.HiddenDangerListPage
    }
  },
  methods: {
    goInfoPage({path, id}) {
      let {inspectId, currentTabValue: listPageName, handelCode, instanceNo, nodeSerialNo} = this;
      let query = {inspectId,listPageName, handelCode, instanceNo, nodeSerialNo}
      if (id != null && id !== '') {
        query.id = id
      }
      this.$router.push({path, query})
    }
  },
  created() {
  },
}
</script>

<style lang="scss" scoped>
.app-container.defect-question {
  display: flex;
  flex-direction: column;


  .inspect-info-txt-container, .data-container {
    width: 100%;
  }

  .inspect-info-txt-container {
    height: 115px;
  }

  ::v-deep .el-tabs {
    height: 40px;

    .el-tabs__header {
      margin-bottom: 0;

      .el-tabs__nav-wrap::after {
        background: rgba(220, 223, 230, 1);
        height: 1px;
      }
    }
  }

  .data-container {
    padding-top: 20px;
    box-sizing: border-box;
    height: calc(100% - 155px);
  }
}
</style>
